<script>
import { fa } from 'element-plus/es/locale/index.mjs';
import { POST } from '../../util/axios.js'
export default {
    data() {
        return {
            exam: {},
            examResult: { report: { score: 80 } },
            screenWidth: null,
            examReport: { report: { score: 80 } },
            reportDrawer: false,
            examsHot: [],
            loading: false,
            drawerSize: 80,
            networks: ""
        }
    },
    methods: {
        async getQNRecordByID(id) {
            console.log(id)
            let rs = await POST('/questionnaire/getQNRecordByID', 'POST', { "id": id }, false, null, false)
            this.examReport = rs.data.report
            console.log("填写问卷结果:::", this.examResult)
        }
    },
    mounted() {
        let id = this.$route.params.id
        this.getQNRecordByID(id)
    }
}
</script>

<template>
    <div id="report" v-loading="loading" style="background-color: #2a2e34;height: 100%;">
        <img src="https://ai.zscampus.com/aistatic/img/reportBanner.png" style="width: 100%;margin-bottom: 0px;" />
        <!-- <h1 style="color:#fff">含光心理分析报告</h1> -->
        <div style="padding: 10px;margin-top: 0px;z-index: 100;background-color: #2a2e34;">
            <div style="padding:20px 20px 40px 20px;background-color: #fff;border-radius: 8px;">
                <div style="align-items: center;
                        display: flex;
                        justify-content: center;
                        place-content: space-between;">
                    <h2>报告内容</h2>
                    <!-- <el-button type="primary" round @click="exportPic">
                    <el-icon :size="16">
                        <Printer />
                    </el-icon></el-button> -->
                </div>
                <div style="margin-top: 5px;"><small>{{ exam.desc }}</small></div>
                <div style="color: #999;margin-top: 5px;"><small>分析时间：{{ new Date() }}</small></div>
                <h4 class="title">心理健康程度得分</h4>
                <div style="display: flex;align-items: center;justify-content: center;">
                    <div style="font-size: 60px;font-weight: 900;color:#67C23A;margin-right: 20px;"
                        v-if="examReport?.report?.score >= 80">{{ examReport?.report?.score }}分</div>
                    <div style="font-size: 60px;font-weight: 900;color:#E6A23C;margin-right: 20px;"
                        v-if="examReport?.report?.score < 80 && examReport?.report?.score > 60">{{
                            examReport?.report?.score
                        }}分
                    </div>
                    <div style="font-size: 60px;font-weight: 900;color:#F56C6C;margin-right: 20px;"
                        v-if="examReport?.report?.score <= 60">{{ examReport?.report?.score }}分</div>
                    <img src="../../assets/kaixin.gif" style="width: 100px;height: 100px;"
                        v-if="examReport?.report?.score >= 80" />
                    <img src="../../assets/ganga.gif" style="width: 100px;height: 100px;"
                        v-if="examReport?.report?.score < 80 && examReport?.report?.score > 60" />
                    <img src="../../assets/nanguo.gif" style="width: 100px;height: 100px;"
                        v-if="examReport?.report?.score <= 60" />
                </div>
                <h4 class="title">指标分析</h4>
                <el-row :gutter="6">
                    <el-col :span="8" :xs="24" :sm="12" :md="8" :lg="6" :xl="6"
                        v-for="v, k in examReport?.report?.metric">
                        <el-card style="margin: 4px;" shadow="never">
                            <h4 class="dotTitle" style="font-size: 16px;">{{ v.name }}</h4>
                            <div style="font-weight: 300;font-size: 16px;">{{ v.value || '未作答' }}</div>
                        </el-card>
                    </el-col>
                </el-row>
                <h4 class="title">心理状况点评</h4>
                <div
                    style="background-color: #f3f4f5;padding:12px 20px ;letter-spacing: 0.8px;line-height: 18px;border-radius: 8px;">
                    {{ examReport?.report?.comment }}
                </div>
                <h4 class="title">指导建议</h4>
                <div
                    style="background-color: #f3f4f5;padding:12px 20px;letter-spacing: 0.8px;line-height: 18px;border-radius: 8px;">
                    {{ examReport?.report?.advice }}
                </div>
                <h4 class="title">心理成因挖掘</h4>
                <div>
                    <el-row>
                        <el-col :span="24">
                            <el-timeline>
                                <el-timeline-item v-for="(item, index) in examReport?.report?.reason"
                                    :timestamp="item.performance">
                                    {{ item.factor }}
                                </el-timeline-item>
                            </el-timeline>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>